/*
 * @Date: 2022-05-18 19:32:37
 * @LastEditors: sailornpg
 * @LastEditTime: 2022-05-24 10:09:59
 * @FilePath: \my-react-components\src\App.tsx
 * @Description: App
 */
import logo from "./logo.svg";
import "./App.css";
import { fas } from "@fortawesome/free-solid-svg-icons";
import { library } from "@fortawesome/fontawesome-svg-core";
import Button from "@/component/Button";
import Menu from "./component/Menu";
import MenuItem from "@/component/Menu/MenuItem";
import SubMenu from "./component/Menu/subMenu";
import TabItem from "./component/Tabs/TabItem";
import Tabs from "./component/Tabs";
import Icon from "./component/Icon";
import Input from "./component/Input";
import Select from "./component/Select";
import Option from "./component/Select/Option";
import AutoCompelete, { DataSourceType } from "./component/AutoComplete";
import Upload, { UploadFile } from "./component/Upload";
//@ts-ignore
library.add(fas);
function App() {
  const defaultFileList: UploadFile[] = [
    {
      uid: "123",
      size: 1234,
      name: "hello.md",
      status: "uploading",
      percent: 30,
    },
    { uid: "122", size: 1234, name: "xyz.md", status: "success", percent: 30 },
    { uid: "121", size: 1234, name: "eyiha.md", status: "error", percent: 30 },
  ];
  const lakers = [
    "bradley",
    "pope",
    "caruso",
    "cook",
    "cousins",
    "james",
    "AD",
    "green",
    "howard",
    "kuzma",
    "McGee",
    "rando",
  ];
  const lakersWithNumber = [
    { value: "bradley", number: 11 },
    { value: "pope", number: 1 },
    { value: "caruso", number: 4 },
    { value: "cook", number: 2 },
    { value: "cousins", number: 15 },
    { value: "james", number: 23 },
    { value: "AD", number: 3 },
    { value: "green", number: 14 },
    { value: "howard", number: 39 },
    { value: "kuzma", number: 0 },
  ];
  const handle = (str: string) => {
    const res = lakersWithNumber.filter((item) => item.value.includes(str));
    console.log(res);
    return res;
  };
  const renderOpt = (
    item: DataSourceType<{ value: string; number: number }>,
  ) => {
    return (
      <>
        <h1>name：{item.value}</h1>
        <h2>number:{item.number}</h2>
      </>
    );
  };
  return (
    <div className="App">
      <header className="App-header">
        <Icon icon="coffee" size="10x" theme="danger"></Icon>
        <img src={logo} className="App-logo" alt="logo" />
        <p>
          <Button size="small" btnType="danger">
            nihao
          </Button>
          <Button btnType="primary">nihao</Button>
          <Button size="large" btnType="warning">
            nihao
          </Button>
          <Button disabled>nihao</Button>
          <Button btnType="link" href="#">
            nihao
          </Button>
          <Button btnType="link" href="#" disabled>
            nihao
          </Button>
        </p>
      </header>
      <Upload
        defaultFileList={defaultFileList}
        action="http://jsonplaceholder.typicode.com/posts/"
        onProgress={(percentage, file) => {
          console.log(percentage);
        }}
      ></Upload>
      <Select mode="multiple">
        <Option>123</Option>
        <Option>1321313</Option>
        <Option>123</Option>
      </Select>
      <Input
        prepend="https://"
        onChange={(e) => {
          console.log(e.target.value);
        }}
      ></Input>
      <div>
        <Menu
          mode="horizontal"
          defaultIndex="0"
          onSelect={(index) => {
            console.log(index);
          }}
        >
          <MenuItem>123</MenuItem>
          <MenuItem>123</MenuItem>
          <MenuItem>123</MenuItem>
          <SubMenu title="下拉">
            <MenuItem>123</MenuItem>
            <MenuItem>123</MenuItem>
            <MenuItem>123</MenuItem>
          </SubMenu>
          <MenuItem>123</MenuItem>
        </Menu>
      </div>
      <div>
        <Tabs defaultIndex="0" border>
          <TabItem label="选项1">
            <p>12331</p>
          </TabItem>
          <TabItem label="选项2">选项2内容</TabItem>
          <TabItem label="选项3" disabled>
            选项3内容
          </TabItem>
        </Tabs>
      </div>
      <AutoCompelete
        fetchSuggestions={handle}
        onSelect={(str) => {
          console.log(str);
        }}
      ></AutoCompelete>
    </div>
  );
}

export default App;
